<template>
  <div class="home">
    <van-nav-bar
      class="nav_bar"
      fixed
      left-text="换轮胎"
      @click-left="onClickLeft"
    >
      <template #right>
        <div class="nav_right">
          <span>车辆问题都可以问我哦~</span>
          <van-image
            class="right_icon"
            :src="require('@/assets/icon/serve/kefu.png')"
            @click="goChat"
          />
        </div>
      </template>
    </van-nav-bar>
    <div v-show="false" class="no_car">
      <van-image
        class="no_car_icon"
        :src="require('@/assets/icon/serve/car.png')"
      />
      <div class="no_car_btn">添加爱车</div>
    </div>
    <div class="has_car">
      <span class="has_car_name"
        >{{ carInfo.brand }}
        <!-- <van-icon name="edit" class="edit"/> -->
      </span>
      <div class="has_car_distance">
        <van-image
          class="has_car_distance_icon"
          :src="require('@/assets/icon/home/yibiaopan.png')"
        />
        <span class="distance">{{ carInfo.mileage || 0 }}KM</span>
        <!-- <van-icon name="edit" class="edit" /> -->
      </div>
      <!-- <div class="has_car_distance">
        <span class="distance">轮胎规格</span>
        <van-icon name="edit" class="edit" />
      </div> -->
    </div>
    <!-- <div class="select">
      <span class="select_text active">品牌筛选</span>
      <span class="select_text">销量排行</span>
      <span class="select_text">价格排序</span>
    </div> -->
    <div class="list">
      <van-image
        class="list_bg"
        :src="require('@/assets/icon/serve/car_bg.png')"
      />
      <div class="list_title">掌心安心修</div>
      <div class="list_tips">
        <van-image
          class="tips_icon"
          :src="require('@/assets/icon/serve/tips.png')"
        />
        <span>政府把关 安心服务 产品保证</span>
      </div>
      <div class="main">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="list.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <luntaiItem
            v-for="(v, i) in list"
            :key="i"
            :item="v"
            @click.native="goDetail(v)"
          ></luntaiItem>
        </van-list>
        <van-empty v-if="!loading && list.length == 0" description="暂无商品" />
      </div>
    </div>
    <!-- <van-popup
      v-model="showStore"
      position="bottom"
      get-container=".luntai_wrapper"
    >
      <div class="main">
        <selectStore
          v-model="storeId"
          @select="select"
          @back="back"
        ></selectStore>
      </div>
    </van-popup> -->
  </div>
</template>

<script>
import luntaiItem from "@/components/serve/luntaiItem.vue";
import selectStore from "@/components/store/selectSore";
import { mapGetters } from "vuex";
import api from "@/api/api";
export default {
  components: { luntaiItem, selectStore },
  props: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      storeId: -1,
      showStore: false,
      carInfo: {},
      id: "",
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["carList", "currentCarIndex"]),
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    goChat() {
      this.$router.push({
        path: "/chat",
      });
    },
    onLoad() {
      this.getList();
    },
    back() {
      this.showStore = false;
    },
    select() {
      this.back();
      //to do order
      let timer = setTimeout(() => {
        this.$router.push({
          path: "/makeSure",
        });
        clearTimeout(timer);
      }, 500);
    },
    buy() {
      this.showStore = true;
    },
    goDetail(v) {
      this.$router.push({
        path: "/serveDetail",
        query: {
          type: 1,
          goodsId: v.id,
        },
      });
    },
    async getList() {
      let res = await api.getHomeGoods({
        categoryId: this.id,
        homePage: false,
        ...this.pageInfo,
      });
      this.list = [...this.list, ...res.data];
      this.loading = false;
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
    },
  },
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    if (this.carList.length) {
      this.hasCar = true;
      this.carInfo = this.carList[this.currentCarIndex];
    }
  },
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-color: #fff;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 130px 50px 150px 50px;
  position: relative;
  .nav_bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
      no-repeat;
    background-size: cover;
    background-position: top center;
    .nav_right {
      display: flex;
      align-items: center;
      font-size: 44px;
      color: #fff;
      .right_icon {
        width: 92px;
        height: 80px;
        margin-left: 20px;
      }
    }
    /deep/.van-nav-bar__text {
      color: #fff;
      margin-left: 20px;
      font-size: 52px;
    }
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #fff;
    }
  }
  /deep/ .van-hairline--bottom::after {
    border: unset;
  }

  .no_car,
  .has_car {
    margin-top: 55px;
    padding: 10px;
    // background: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_icon {
      width: 85px;
      height: 85px;
    }
    &_btn {
      padding: 15px 50px;
      border-radius: 999px;
      font-size: 44px;
      color: #fff;
      text-align: center;
      background: linear-gradient(to right, #0160ea, #01bffa);
    }
    .has_car_name {
      font-size: 44px;
      color: #333;
      display: flex;
      align-items: center;
      .edit {
        font-size: 55px;
        color: #999;
      }
    }
    .has_car_distance {
      display: flex;
      align-items: center;
      font-size: 44px;
      color: #333;
      &_icon {
        width: 54px;
        height: 42px;
        margin-right: 15px;
      }
      .distance {
        margin-right: 10px;
      }
    }
  }
  .has_car {
    padding: 10px 30px;
  }
  .select {
    width: 100%;
    margin-top: 100px;
    padding: 40px 80px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_text {
      font-size: 36px;
      color: #fff;
    }
    .active {
      color: #1200ff;
    }
  }
  .list {
    margin-top: 35px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background: #eef3ff;
    padding: 60px 30px;
    position: relative;
    overflow: hidden;
    .list_bg {
      position: absolute;
      top: 20px;
      right: -70px;
      width: 332px;
      height: 152px;
    }
    .list_title {
      font-size: 56px;
      color: #3a5899;
    }
    .list_tips {
      display: flex;
      align-items: center;
      font-size: 34px;
      color: #333333;
      .tips_icon {
        width: 55px;
        height: 61px;
        margin-right: 20px;
      }
    }
    .main {
      margin-top: 50px;
    }
  }
}
</style>
